<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>应用卡片重新设计 - UI图</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
      padding: 40px 20px;
      line-height: 1.6;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
    }

    .page-title {
      text-align: center;
      color: white;
      font-size: 2.5rem;
      font-weight: 700;
      margin-bottom: 3rem;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }

    .cards-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
      gap: 2rem;
    }

    /* 新设计的应用卡片 */
    .app-card {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(20px);
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      position: relative;
    }

    .app-card:hover {
      transform: translateY(-8px) scale(1.02);
      box-shadow: 0 32px 64px rgba(0, 0, 0, 0.15);
    }

    /* 卡片封面区域 - 解决封面展示问题 */
    .card-header {
      position: relative;
      height: 220px;
      /* 增加高度 */
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .card-header::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
      opacity: 0.3;
    }

    .app-icon {
      width: 90px;
      /* 增大图标 */
      height: 90px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2.5rem;
      /* 增大图标字体 */
      color: white;
      backdrop-filter: blur(10px);
      border: 2px solid rgba(255, 255, 255, 0.3);
      position: relative;
      z-index: 2;
    }

    /* 优化状态标识位置 */
    .status-badges {
      position: absolute;
      top: 16px;
      right: 16px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      z-index: 3;
    }

    .badge {
      padding: 8px 14px;
      /* 增大徽章 */
      border-radius: 25px;
      font-size: 13px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 6px;
      backdrop-filter: blur(15px);
      border: 1px solid rgba(255, 255, 255, 0.3);
    }

    .badge.featured {
      background: rgba(251, 191, 36, 0.9);
      color: white;
      box-shadow: 0 4px 15px rgba(251, 191, 36, 0.3);
    }

    .badge.deployed {
      background: rgba(16, 185, 129, 0.9);
      color: white;
      box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
    }

    .badge.type {
      background: rgba(255, 255, 255, 0.95);
      color: #374151;
    }

    /* 改进快速操作按钮位置 */
    .quick-actions {
      position: absolute;
      top: 16px;
      left: 16px;
      display: flex;
      gap: 10px;
      opacity: 0;
      transform: translateY(-10px);
      transition: all 0.3s ease;
      z-index: 3;
    }

    .app-card:hover .quick-actions {
      opacity: 1;
      transform: translateY(0);
    }

    .quick-btn {
      width: 44px;
      /* 增大按钮 */
      height: 44px;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(15px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #374151;
      cursor: pointer;
      transition: all 0.3s ease;
      font-size: 16px;
    }

    .quick-btn:hover {
      background: white;
      transform: scale(1.1);
      box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
    }

    /* 优化卡片内容区域 */
    .card-body {
      padding: 28px;
      /* 增加内边距 */
    }

    .app-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 18px;
    }

    .app-title {
      font-size: 1.4rem;
      /* 增大标题字体 */
      font-weight: 700;
      color: #1a202c;
      margin: 0;
      flex: 1;
      margin-right: 16px;
      cursor: pointer;
      transition: color 0.3s ease;
    }

    .app-title:hover {
      color: #667eea;
    }

    .app-status {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 12px;
      background: #f8fafc;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 500;
    }

    .status-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }

    .status-dot.online {
      background: #10b981;
      box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
    }

    .status-dot.offline {
      background: #f59e0b;
    }

    .app-description {
      color: #64748b;
      font-size: 15px;
      /* 增大描述字体 */
      line-height: 1.6;
      margin-bottom: 22px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      min-height: 48px;
    }

    /* 改进统计信息布局 */
    .app-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      margin-bottom: 22px;
      padding: 18px;
      background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
      border-radius: 16px;
      border: 1px solid rgba(226, 232, 240, 0.5);
    }

    .stat-item {
      text-align: center;
    }

    .stat-value {
      font-size: 1.2rem;
      font-weight: 700;
      color: #1a202c;
      display: block;
    }

    .stat-label {
      font-size: 12px;
      color: #64748b;
      margin-top: 4px;
    }

    /* 改进用户信息样式 */
    .user-info {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 16px;
      background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
      border-radius: 16px;
      margin-bottom: 22px;
      cursor: pointer;
      transition: all 0.3s ease;
      border: 1px solid rgba(226, 232, 240, 0.5);
    }

    .user-info:hover {
      transform: translateX(4px);
      box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);
      background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    }

    .user-avatar {
      width: 44px;
      height: 44px;
      border-radius: 14px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: 700;
      font-size: 1.2rem;
    }

    .user-details {
      flex: 1;
    }

    .user-name {
      font-weight: 600;
      color: #1a202c;
      font-size: 15px;
    }

    .user-role {
      font-size: 13px;
      color: #64748b;
      margin-top: 2px;
    }

    .admin-crown {
      color: #fbbf24;
      font-size: 1.3rem;
    }

    /* 优化操作按钮区域 */
    .card-actions {
      display: flex;
      gap: 14px;
    }

    .action-btn {
      flex: 1;
      padding: 14px 18px;
      /* 增大按钮 */
      border: none;
      border-radius: 14px;
      font-weight: 600;
      font-size: 15px;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      text-decoration: none;
    }

    .action-btn.primary {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
    }

    .action-btn.primary:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
    }

    .action-btn.secondary {
      background: #f8fafc;
      color: #64748b;
      border: 2px solid #e2e8f0;
    }

    .action-btn.secondary:hover {
      background: #667eea;
      color: white;
      border-color: #667eea;
      transform: translateY(-3px);
    }

    .action-btn.success {
      background: linear-gradient(135deg, #10b981 0%, #059669 100%);
      color: white;
    }

    .action-btn.success:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 30px rgba(16, 185, 129, 0.4);
    }

    /* 更多操作菜单 */
    .more-btn {
      width: 52px;
      height: 52px;
      border-radius: 14px;
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #64748b;
      cursor: pointer;
      transition: all 0.3s ease;
      font-size: 16px;
    }

    .more-btn:hover {
      background: #667eea;
      color: white;
      border-color: #667eea;
      transform: translateY(-3px);
    }

    /* 响应式适配 */
    @media (max-width: 768px) {
      .cards-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
      }

      .card-body {
        padding: 20px;
      }

      .card-actions {
        flex-direction: column;
        gap: 12px;
      }

      .action-btn {
        justify-content: center;
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <h1 class="page-title">应用卡片重新设计方案</h1>

    <div class="cards-grid">
      <!-- 精选应用卡片 -->
      <div class="app-card">
        <div class="card-header">
          <div class="quick-actions">
            <div class="quick-btn"><i class="fas fa-eye"></i></div>
            <div class="quick-btn"><i class="fas fa-comments"></i></div>
          </div>

          <div class="status-badges">
            <div class="badge featured">
              <i class="fas fa-star"></i>
              精选
            </div>
            <div class="badge type">
              <i class="fas fa-globe"></i>
              Web应用
            </div>
          </div>

          <div class="app-icon">
            <i class="fas fa-rocket"></i>
          </div>
        </div>

        <div class="card-body">
          <div class="app-header">
            <h3 class="app-title">智能任务管理系统</h3>
            <div class="app-status">
              <div class="status-dot online"></div>
              <span>已部署</span>
            </div>
          </div>

          <p class="app-description">
            一个基于AI的智能任务管理系统，帮助团队更高效地协作和管理项目进度，支持自动化工作流程。
          </p>

          <div class="app-stats">
            <div class="stat-item">
              <span class="stat-value">1.2k</span>
              <div class="stat-label">使用次数</div>
            </div>
            <div class="stat-item">
              <span class="stat-value">4.8</span>
              <div class="stat-label">评分</div>
            </div>
            <div class="stat-item">
              <span class="stat-value">7天</span>
              <div class="stat-label">更新时间</div>
            </div>
          </div>

          <div class="user-info">
            <div class="user-avatar">张</div>
            <div class="user-details">
              <div class="user-name">张三</div>
              <div class="user-role">创建者</div>
            </div>
            <div class="admin-crown">
              <i class="fas fa-crown"></i>
            </div>
          </div>

          <div class="card-actions">
            <button class="action-btn primary">
              <i class="fas fa-comments"></i>
              对话
            </button>
            <button class="action-btn secondary">
              <i class="fas fa-eye"></i>
              详情
            </button>
            <div class="more-btn">
              <i class="fas fa-ellipsis-h"></i>
            </div>
          </div>
        </div>
      </div>

      <!-- 已部署应用卡片 -->
      <div class="app-card">
        <div class="card-header" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%);">
          <div class="quick-actions">
            <div class="quick-btn"><i class="fas fa-external-link-alt"></i></div>
            <div class="quick-btn"><i class="fas fa-edit"></i></div>
          </div>

          <div class="status-badges">
            <div class="badge deployed">
              <i class="fas fa-cloud"></i>
              已部署
            </div>
            <div class="badge type">
              <i class="fas fa-mobile-alt"></i>
              移动应用
            </div>
          </div>

          <div class="app-icon">
            <i class="fas fa-chart-line"></i>
          </div>
        </div>

        <div class="card-body">
          <div class="app-header">
            <h3 class="app-title">数据分析平台</h3>
            <div class="app-status">
              <div class="status-dot online"></div>
              <span>运行中</span>
            </div>
          </div>

          <p class="app-description">
            企业级数据分析和可视化平台，支持多种数据源接入，提供丰富的图表和报表功能。
          </p>

          <div class="app-stats">
            <div class="stat-item">
              <span class="stat-value">856</span>
              <div class="stat-label">活跃用户</div>
            </div>
            <div class="stat-item">
              <span class="stat-value">99.9%</span>
              <div class="stat-label">可用性</div>
            </div>
            <div class="stat-item">
              <span class="stat-value">2天</span>
              <div class="stat-label">更新时间</div>
            </div>
          </div>

          <div class="user-info">
            <div class="user-avatar">李</div>
            <div class="user-details">
              <div class="user-name">李四</div>
              <div class="user-role">开发者</div>
            </div>
          </div>

          <div class="card-actions">
            <button class="action-btn success">
              <i class="fas fa-rocket"></i>
              访问应用
            </button>
            <button class="action-btn secondary">
              <i class="fas fa-cog"></i>
              管理
            </button>
            <div class="more-btn">
              <i class="fas fa-ellipsis-h"></i>
            </div>
          </div>
        </div>
      </div>

      <!-- 开发中应用卡片 -->
      <div class="app-card">
        <div class="card-header" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);">
          <div class="quick-actions">
            <div class="quick-btn"><i class="fas fa-code"></i></div>
            <div class="quick-btn"><i class="fas fa-play"></i></div>
          </div>

          <div class="status-badges">
            <div class="badge type">
              <i class="fas fa-desktop"></i>
              桌面应用
            </div>
          </div>

          <div class="app-icon">
            <i class="fas fa-tools"></i>
          </div>
        </div>

        <div class="card-body">
          <div class="app-header">
            <h3 class="app-title">代码生成工具</h3>
            <div class="app-status">
              <div class="status-dot offline"></div>
              <span>开发中</span>
            </div>
          </div>

          <p class="app-description">
            基于模板的智能代码生成工具，支持多种编程语言和框架，提高开发效率。
          </p>

          <div class="app-stats">
            <div class="stat-item">
              <span class="stat-value">234</span>
              <div class="stat-label">代码生成</div>
            </div>
            <div class="stat-item">
              <span class="stat-value">85%</span>
              <div class="stat-label">完成度</div>
            </div>
            <div class="stat-item">
              <span class="stat-value">1天</span>
              <div class="stat-label">更新时间</div>
            </div>
          </div>

          <div class="user-info">
            <div class="user-avatar">王</div>
            <div class="user-details">
              <div class="user-name">王五</div>
              <div class="user-role">创建者</div>
            </div>
          </div>

          <div class="card-actions">
            <button class="action-btn primary">
              <i class="fas fa-comments"></i>
              继续开发
            </button>
            <button class="action-btn secondary">
              <i class="fas fa-eye"></i>
              预览
            </button>
            <div class="more-btn">
              <i class="fas fa-ellipsis-h"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>